<template>
	<view class="main bgfff">
		<gui-a-header title="编辑"></gui-a-header>
		<view class="warp">
			<view class="card">
				<view class="title-img flex-ac">
					<image src="../../static/image/userInfo.png" mode="widthFix" style="height: auto;"></image>
					<text class="f28 gui-bold">公司信息</text>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26 mt30">
					<view class="label c333">
						LOGO
					</view>
					<view class="val">
						<!-- <image class="tx_image" src="../../static/logo.png" mode="aspectFit"></image> -->
						<gui-upload-images :items="[companyForm.logo]" @change="changeTx" ref="uploadimgTx"
							:maxFileNumber="1" @uploaded="uploadedTx"
							:uploadServerUrl="`${baseURL}/common/uploadLocal`"></gui-upload-images>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						公司名称
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.companyName" placeholder="请输入公司名称" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						行业
					</view>
					<view class="val c333 gui-flex1 qoverDot">
						<!-- <picker @change="professionPickerChange" :value="professionIndex" :range="professionArr"
							range-key="dictLabel">
							<view class="val gui-flex gui-align-items-center c333">
								<view class="uni-input">{{professionArr[professionIndex].dictLabel}}</view>
								<text class="gui-icons c999">&#xe601;</text>
							</view>
						</picker> -->
						<picker mode="multiSelector" @columnchange="professionPickerChange" :value="professionIndex"
							:range="professionArr" range-key="label">
							<view class="uni-input" style="text-align: right;" v-if="professionArr[0][professionIndex[0]]">
								{{professionArr[0][professionIndex[0]].label}}，{{professionArr[1][professionIndex[1]].label}}
							</view>
						</picker>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						融资
					</view>
					<picker @change="financingPickerChange" :value="financingIndex" :range="financingArr"
						range-key="dictLabel">
						<view class="val gui-flex gui-align-items-center c333">
							<view class="uni-input">{{financingArr[financingIndex].dictLabel}}</view>
							<text class="gui-icons c999">&#xe601;</text>
						</view>
					</picker>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						人员
					</view>
					<picker @change="personnelPickerChange" :value="personnelIndex" :range="personnelArr"
						range-key="dictLabel">
						<view class="val gui-flex gui-align-items-center c333">
							<view class="uni-input">{{personnelArr[personnelIndex].dictLabel}}</view>
							<text class="gui-icons c999">&#xe601;</text>
						</view>
					</picker>
				</view>
				<!-- <view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						注册资金
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.registerMoney"
							placeholder="请输入注册资金" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						成立时间
					</view>
					<gui-datetime @confirm="setUpTimeConfirm" :value="companyForm.creTime" :isTime="false">
						<view class="val gui-flex gui-align-items-center c333">
							<view class="uni-input" v-if="companyForm.creTime">{{companyForm.creTime}}</view>
							<view class="uni-input c999" v-else>
								请选择成立时间
							</view>
							<text class="gui-icons c999">&#xe601;</text>
						</view>
					</gui-datetime>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						法人代表
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.person" placeholder="请输入法人代表" />
					</view>
				</view> -->
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						注册地址
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.registerAddress"
							placeholder="请输入注册地址" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						联系人
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.contacts" placeholder="请输入联系人" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						联系电话
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.phone" placeholder="请输入联系电话" />
					</view>
				</view>
				<!-- <view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						求职状态
					</view>
					<view class="val c333">
						<picker @change="bindJobStatusPickerChange" :value="jobIndex" :range="jobType"
							range-key="label">
							<view class="uni-input">{{jobType[jobIndex].label}}</view>
						</picker>
					</view>
				</view> -->
			</view>
			<view class="zw_10"></view>
			<view class="card">
				<view class="title-img flex-ac">
					<image src="../../static/image/userInfo.png" mode="widthFix" style="height: auto;"></image>
					<text class="f28 gui-bold">公司介绍</text>
				</view>
				<view class="border textarea_box">
					<textarea name="name5" placeholder="说点什么..." v-model="companyForm.companyContext" :maxlength="400"
						class="gui-textarea gui-border-box" />
					<text class="max_len c999 f18">{{companyForm.companyContext.length}}/400</text>
				</view>
			</view>
			<view class="zw_10"></view>
			<view class="card">
				<view class="title-img flex-ac gui-space-between">
					<view class="left">
						<image src="../../static/image/jyjl.png" mode="widthFix" style="height: auto;"></image>
						<text class="f28 gui-bold">福利待遇</text>
					</view>
					<view class="tool f38" @tap="openPopup">
						<text class="bai-icons">&#xe6de;</text>
					</view>
				</view>
				<view class="tap_box gui-flex gui-wrap">
					<view class="no-data gui-flex gui-justify-content-center gui-align-items-center"
						v-if="companyForm.welfareTreatmentArr.length <= 0">
						<gui-empty>
							<template v-slot:img>
								<view class="gui-flex gui-rows gui-justify-content-center">
									<text class="gui-icons gui-empty-icon gui-color-gray f50">&#xe644;</text>
								</view>
							</template>
							<template v-slot:text>
								<text
									class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无福利待遇</text>
							</template>
						</gui-empty>
					</view>
					<view class="tap_item" v-for="(item,index) in companyForm.welfareTreatmentArr" :key="index">
						<view class="c333 f24 tap_item_lineheight qoverDot">
							{{item}}
						</view>
						<text class="del_icon gui-icons colorBlue f30" @tap="delFl(index)">&#xe794;</text>
					</view>
				</view>
			</view>
			<view class="zw_10"></view>
			<view class="card">
				<view class="title-img flex-ac gui-space-between">
					<view class="left">
						<image src="../../static/image/qzyx.png" mode="widthFix" style="height: auto;"></image>
						<text class="f28 gui-bold">公司环境</text>
					</view>
				</view>
				<gui-upload-video :items="(companyForm.companyVedio) ? [companyForm.companyVedio] : []"
					@change="changeVideo" ref="uploadVideo" @uploaded="uploadedVideo"
					:uploadServerUrl="`${baseURL}/common/uploadLocal`"></gui-upload-video>
				<!-- <view class="border video_upload_box">
					<image class="img_video_upload" src="@/static/image/video_upload.png" mode="widthFix"></image>
					<view class="txt f24 mt30 c999">
						点击上传视频
					</view>
					<view class="txt f20 c999 mt10">
						建议：视频时间需控制在10s~120s内，视频大小不超过300M
					</view>
				</view> -->

			</view>
			<view class="gui-margin-top" style="padding: 0 30rpx 30rpx 30rpx;">
				<gui-upload-images :items="companyForm.companyImageArr" @change="change" ref="uploadimgcom"
					@uploaded="uploaded" :maxFileNumber="4"
					:uploadServerUrl="`${baseURL}/common/uploadLocal`"></gui-upload-images>
				<view class="txt f20 c999 mt10">
					建议：单张照片不超过<text class="cred">5M</text>,最多上传4张图片
				</view>
			</view>
			<view class="zw_10"></view>
			<view class="card">
				<view class="title-img flex-ac gui-space-between">
					<view class="left">
						<image src="../../static/image/gzjl.png" mode="widthFix" style="height: auto;"></image>
						<text class="f28 gui-bold">工作地址</text>
					</view>
				</view>
				<view class="work_address gui-flex gui-space-between" @tap="chooseLocation">
					<text class="c666 f22">{{companyForm.workAddress}}</text>
					<text class="gui-icons c666">&#xe601;</text>
				</view>
				<view class="map">
					<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
						:markers="covers"></map>
				</view>
			</view>
			<view class="btn_warp gui-flex">
				<view class="btn line_right" @tap="realDraftSumbit">
					暂时保存
				</view>
				<view class="btn" @tap="realSumbit">
					确定
				</view>
			</view>
		</view>
		<PopupInput ref="popupinputRef" @confirm="flConfirm"></PopupInput>
	</view>
</template>

<script setup>
	import config from '@/config/app.js'
	import PopupInput from '@/components/Popup-input/Popup-input.vue'

	import graceChecker from "@/Grace6/js/checker.js"

	const {
		baseURL
	} = config;
	import {
		ref,
		reactive,
		inject,
		watch
	} from 'vue'
	// import {
	// 	jobType,
	// 	disabilityLevel
	// } from "@/utils/picker.js";
	const $u = reactive(inject('$u'))
	const isClick = ref(true);

	import {
		selectUsertConpanyByTypeIsOne,
		upUserCompanyInfo,
		upUserCompanyInfoCGao
	} from '@/api/company.js';

	import {
		getSysDictTypeList,
		selectOneGradeList
	} from '@/api/config.js';

	let timer;

	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'

	onUnload(() => {
		if (timer) clearTimeout(timer);
	})

	const popupinputRef = ref(null)
	// 是否为草稿
	const isDraft = ref(false)

	const longitude = ref('116.39742') //经度
	const latitude = ref('39.909') //纬度

	const covers = ref([{ //地图标点
		id: 1,
		latitude: 39.909,
		longitude: 116.39742,
		width: 16,
		height: 25,
		iconPath: '/static/index/location.png'
	}])

	const companyForm = ref({
		industryId: '',
		companyContext: '',
		welfareTreatmentArr: []
	})
	// 是否上传完成了
	const uploadFilePross = ref([true, true, true])

	const professionData = ref([]);
	const professionArr = ref([
		[{
			value: 0,
			label: '请选择'
		}],
		[{
			value: 1,
			label: '请选择'
		}]
	])
	const professionIndex = ref([0, 0])
	const professionPickerChange = (e) => {
		console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
		professionIndex.value[e.detail.column] = e.detail.value
		switch (e.detail.column) {
			case 0: //拖动第1列
				let childList = professionData.value[e.detail.value].listGrade.map(e => {
					return {
						value: e.id,
						label: e.twoName
					}
				})
				professionArr.value[1] = childList;
				professionIndex.value.splice(1, 1, 0)
				companyForm.value.industry = professionArr.value[1][0].label;
				companyForm.value.industryId = professionArr.value[1][0].value;
				break
			case 1: //拖动第1列
				companyForm.value.industryId = professionArr.value[1][e.detail.value].value;
				companyForm.value.industry = professionArr.value[1][e.detail.value].label;
				break
		}
	}

	const financingArr = ref([])
	const financingIndex = ref(0)
	const financingPickerChange = (e) => {
		financingIndex.value = e.detail.value;
		companyForm.value.financing = financingArr.value[e.detail.value].dictValue
	}

	const personnelArr = ref([])
	const personnelIndex = ref(0)
	const personnelPickerChange = (e) => {
		personnelIndex.value = e.detail.value;
		companyForm.value.personnel = personnelArr.value[e.detail.value].dictValue
	}

	const setUpTimeConfirm = (res) => {
		companyForm.value.creTime = res[0] + '-' + res[1] + '-' + res[2];
	}


	const uploadimgTx = ref(null);
	const changeTx = (e) => {
		let list = e.filter((item) => {
			return item.progress == 0
		})
		if (list.length > 0) uploadFilePross.value[0] = false;
		console.log(uploadFilePross.value);
	}
	const uploadedTx = (uploadedImgs) => {
		companyForm.value.logo = uploadedImgs[0].url;
		uploadFilePross.value[0] = true;
		if (isDraft.value) {
			realDraftSumbit();
		} else {
			realSumbit();
		}
	}
	const uploadVideo = ref(null);
	const changeVideo = (e) => {
		let list = e.filter((item) => {
			return item.progress == 0
		})
		if (list.length > 0) uploadFilePross.value[1] = false;
	}
	const uploadedVideo = (uploadedVideos) => {
		console.log(uploadedVideos);
		companyForm.value.companyVedio = uploadedVideos[0].url;
		uploadFilePross.value[1] = true;
		if (isDraft.value) {
			realDraftSumbit();
		} else {
			realSumbit();
		}
	}

	const uploadimgcom = ref(null)
	const change = (e) => {
		let list = e.filter((item) => {
			return item.progress == 0
		})
		if (list.length > 0) uploadFilePross.value[2] = false;
	}
	const uploaded = (uploadedImgs) => {
		companyForm.value.companyImageArr = [];
		let urlPlits = [];
		uploadedImgs.forEach(item => {
			urlPlits.push(item.url);
			companyForm.value.companyImageArr.push(item.url);
		})
		companyForm.value.companyImage = urlPlits.join(',');
		uploadFilePross.value[2] = true;
		if (isDraft.value) {
			realDraftSumbit();
		} else {
			realSumbit();
		}
	}

	const openPopup = () => {
		popupinputRef.value.open();
	}
	const flConfirm = (data) => {
		companyForm.value.welfareTreatmentArr.push(data.value)
		let result = Object.assign(companyForm.value, {})
		companyForm.value.welfareTreatment = result.welfareTreatmentArr.join(',');
	}
	const delFl = (index) => {
		companyForm.value.welfareTreatmentArr.splice(index, 1);
		let result = Object.assign(companyForm.value, {})
		companyForm.value.welfareTreatment = result.welfareTreatmentArr.join(',');
	}

	const chooseLocation = () => {
		uni.chooseLocation({
			success: function(res) {
				companyForm.value.lon = res.longitude;
				companyForm.value.lat = res.latitude;
				companyForm.value.workAddress = res.address;
				latitude.value = Number(res.latitude)
				longitude.value = Number(res.longitude)
				covers.value = [{
					id: 1,
					latitude: Number(res.latitude),
					longitude: Number(res.longitude),
					width: 16,
					height: 25,
					iconPath: '/static/index/location.png'
				}]
			},
			fail(err) {
				console.log(err);
			}
		});
	}

	const loadZd = () => {
		selectOneGradeList().then(res => {
			professionData.value = res.data;
			console.log(professionData.value);
			let list = res.data.map(e => {
				return {
					value: e.id,
					label: e.oneName
				}
			})
			let childList = professionData.value[0].listGrade.map(e => {
				return {
					value: e.id,
					label: e.twoName
				}
			})
			professionArr.value[0] = list;
			professionArr.value[1] = childList;
			
			getSysDictTypeList({
				dictType: ''
			}).then(res => {
				let result = res.data;
				/* professionArr.value = []; */
				financingArr.value = [];
				personnelArr.value = [];
				result.forEach(item => {
					/* // 行业
					if (item.dictType == 'com_industry') {
						professionArr.value.push(item)
					} */
					// 融资
					if (item.dictType == 'com_financing') {
						financingArr.value.push(item)
					}
					// 人员
					if (item.dictType == 'com_num_user') {
						personnelArr.value.push(item)
					}
				})
				loadData();
			})
		})
	}
	loadZd();

	const loadData = () => {
		selectUsertConpanyByTypeIsOne().then(res => {
			if (res.code == 200) {
				let result = res.data;
				if (result.companyImage) {
					result.companyImageArr = result.companyImage.split(',')
				}
				if (result.welfareTreatment) {
					result.welfareTreatmentArr = result.welfareTreatment.split(',')
				} else {
					result.welfareTreatmentArr = [];
				}
				companyForm.value = result;
				if (!companyForm.value.companyContext) {
					companyForm.value.companyContext = '';
				}
				// professionArr.value.forEach((item, index) => {
				// 	if (item.dictValue == result.industry) professionIndex.value = index;
				// })
				if(result.industryId) {
					console.log(professionData.value);
					professionData.value.forEach((item,index) => {
						console.log(item);
						item.listGrade.some((citem, cindex) => {
							if(citem.id == result.industryId) {
								let childList = professionData.value[index].listGrade.map(e => {
									return {
										value: e.id,
										label: e.twoName
									}
								})
								professionArr.value[1] = childList;
								professionIndex.value = [index, cindex];
								return true;
							}
						})
					})
				}
				financingArr.value.forEach((item, index) => {
					if (item.dictValue == result.financing) financingIndex.value = index;
				})
				personnelArr.value.forEach((item, index) => {
					if (item.dictValue == result.personnel) personnelIndex.value = index;
				})
				latitude.value = Number(result.lat)
				longitude.value = Number(result.lon)
				covers.value = [{
					id: 1,
					latitude: Number(result.lat),
					longitude: Number(result.lon),
					width: 16,
					height: 25,
					iconPath: '/static/index/location.png'
				}]
			}
		})
	}


	const realSumbit = () => {
		isDraft.value = false;
		if (!uploadFilePross.value[0]) {
			uploadimgTx.value.upload();
			return;
		}
		if (!uploadFilePross.value[1]) {
			uploadVideo.value.upload();
			return;
		}
		if (!uploadFilePross.value[2]) {
			uploadimgcom.value.upload();
			return;
		}

		//定义表单规则
		let rule = [{
			name: 'companyName',
			checkType: 'notnull',
			errorMsg: '请输入公司名称'
		},{
			name: 'registerAddress',
			checkType: 'notnull',
			errorMsg: '请输入注册地址'
		}, {
			name: 'contacts',
			checkType: 'notnull',
			errorMsg: '请输入联系人'
		}, {
			name: 'phone',
			checkType: 'notnull',
			errorMsg: '请输入联系电话'
		}, {
			name: 'companyContext',
			checkType: 'notnull',
			errorMsg: '请输入公司介绍'
		}, {
			name: 'lon',
			checkType: 'notnull',
			errorMsg: '请选择工作地址'
		}];
		let checkRes = graceChecker.check(companyForm.value, rule);
		if (checkRes) {
			if (isClick.value) {
				isClick.value = false;
			} else {
				return;
			}
			let form = Object.assign(companyForm.value, {})
			upUserCompanyInfo(form).then(res => {
				if (res.code == 200) {
					$u.msg('操作成功');
					timer = setTimeout(() => {
						uni.$emit('updateCompany')
						$u.back();
					}, 500)
				}
			}).finally(() => {
				isClick.value = true;
			})
		} else {
			$u.msg(graceChecker.error);
		}
	}

	const realDraftSumbit = () => {
		isDraft.value = true;
		if (!uploadFilePross.value[0]) {
			uploadimgTx.value.upload();
			return;
		}
		if (!uploadFilePross.value[1]) {
			uploadVideo.value.upload();
			return;
		}
		if (!uploadFilePross.value[2]) {
			uploadimgcom.value.upload();
			return;
		}

		//定义表单规则
		let rule = [{
			name: 'companyName',
			checkType: 'notnull',
			errorMsg: '请输入公司名称'
		}, {
			name: 'registerAddress',
			checkType: 'notnull',
			errorMsg: '请输入注册地址'
		}, {
			name: 'contacts',
			checkType: 'notnull',
			errorMsg: '请输入联系人'
		}, {
			name: 'phone',
			checkType: 'notnull',
			errorMsg: '请输入联系电话'
		}, {
			name: 'companyContext',
			checkType: 'notnull',
			errorMsg: '请输入公司介绍'
		}, {
			name: 'lon',
			checkType: 'notnull',
			errorMsg: '请选择工作地址'
		}];
		let checkRes = graceChecker.check(companyForm.value, rule);
		if (checkRes) {
			if (isClick.value) {
				isClick.value = false;
			} else {
				return;
			}
			let form = Object.assign(companyForm.value, {})
			upUserCompanyInfoCGao(form).then(res => {
				if (res.code == 200) {
					$u.msg('已保存为草稿');
					timer = setTimeout(() => {
						$u.back();
					}, 500)
				} else {
					$u.msg(res.msg);
				}
			}).finally(() => {
				isClick.value = true;
			})
		} else {
			$u.msg(graceChecker.error);
		}
	}
</script>

<style lang="scss">
	.warp {
		box-sizing: border-box;
	}

	.card {
		box-sizing: border-box;
		padding: 20rpx 64rpx 0rpx 40rpx;

		.tool {
			position: relative;
			right: -40rpx;

			.bai-icons {
				color: #167C3A;
			}
		}
	}

	.title-img {
		padding: 20rpx 0;
	}

	.tx_image {
		width: 115rpx;
		height: 115rpx;
	}

	.row {
		padding: 24rpx 0;
		border-bottom: 1rpx solid #EBEBEB;
	}

	.val_input {
		text-align: right;
	}

	.zw_10 {
		width: 100%;
		height: 10rpx;
		background: #f8f9fd;
	}

	.border {
		position: relative;
		border-radius: 14rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		border: 1rpx solid rgba(64, 114, 254, 0.35);
		margin-bottom: 30rpx;

		.del {
			position: absolute;
			right: -46rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #4072FE;
		}
	}

	.btn_warp {
		width: 750rpx;
		height: 89rpx;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			width: 50%;
			background: linear-gradient(180deg, #4072FE 0%, #0034C7 100%);
			font-size: 26rpx;

			&.line_right {
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: 0;
					height: 89rpx;
					width: 1rpx;
					background-color: #CCCCCC;
				}
			}
		}
	}

	.textarea_box {
		box-sizing: border-box;
		padding: 24rpx 10rpx;
		position: relative;

		.max_len {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
		}
	}

	.tap_box {
		box-sizing: border-box;
		padding: 10rpx 0 38rpx 0;

		.tap_item {
			position: relative;
			width: 196rpx;
			height: 82rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(127, 127, 127, 0.05);
			border-radius: 14rpx;
			border: 1rpx solid rgba(64, 114, 254, 0.37);
			text-align: center;
			margin-right: 22rpx;
			margin-bottom: 13rpx;

			.tap_item_lineheight {
				line-height: 82rpx;
				padding: 0 20rpx;
			}

			.del_icon {
				position: absolute;
				right: 10rpx;
				bottom: 6rpx;
			}
		}
	}

	.tap_box>.tap_item:nth-child(3n+3) {
		margin-right: 0rpx;
	}

	.video_upload_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 359rpx;
	}

	.img_video_upload {
		width: 132rpx;
		height: auto;
	}

	.work_address {
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-bottom: 25rpx;
	}

	.map {
		width: 674rpx;
		height: 362rpx;
		padding-bottom: 60rpx;
	}

	.no-data {
		width: 100%;
		height: 200rpx;
	}
</style>